<template>
  <div>
    <div class="search-wrapper">
      <mu-text-field hintText="请输入带搜索的歌手或歌曲名"  icon="search" @input="seachMusic" fullWidth/>
    </div>
    <div>
      <div class="title">歌曲列表</div>
      <mu-divider />
      <div class="content">
        <mu-list :value="value" @change="change">
           <div v-for="(item, index) in songList" @click="playAudio(item)">
              <mu-list-item :disableRipple="true" :title="item.mName" :value="item.mId" :describeText="item.authod">
                <span slot="left" class="indexStyle">{{index + 1}}</span>
              </mu-list-item>
               <mu-divider inset/>
           </div>
         </mu-list>
      </div>
    </div>
  </div>
</template>

<script>
  import qs from 'qs'
  export default {
    data () {
      return {
        songList: [],
        backupSongList: [],
        value: 0
      }
    },
    mounted () {
      this.getAllSongs()
    },
    methods: {
      seachMusic (value) {
        if (value === '') {
          this.songList = this.backupSongList
        } else {
          const result = this.songList.filter(item => item.mName.indexOf(value) !== -1 || item.authod.indexOf(value) !== -1)
          if (result.length !== 0) {
            this.songList = result
          }
        }
      },
      change (val) {
        this.value = val
      },
      playAudio (item) {
        this.$store.commit('pause')
        const data = qs.stringify({
          mId: item.mId
        })
        this.$http.post('http://hongtaofans.cn/music/music/getmusicpath', data).then((res) => {
          console.log(res.data)
          var url = `http://hongtaofans.cn/music/resources/music/${res.data.musicpath}`
          var audio = {}
          audio.id = item.mId
          audio.singer = item.mName
          audio.albumPic = `http://hongtaofans.cn/music/resources/pic/singer/${res.data.coverpath}`
          audio.name = item.authod
          this.$store.commit('addToList', audio)
          this.$store.commit('openLoading')
          this.$store.commit('setAudio')
          this.$store.commit('setLocation', url)
          // this.$store.dispatch('getSong', audio.id)
        }).catch((error) => {
          console.log('加载单曲信息出错：' + error)
        })
      },
      getAllSongs () {
        this.$http.post('http://hongtaofans.cn/music/music/getallmusic').then((res) => {
          if (res.data.status === 1) {
            this.songList = res.data.result
            this.backupSongList = res.data.result
          } else {
            console.log('获取歌曲列表出错')
          }
        })
      }
    }
  }
</script>

<style lang="less" scoped>
@import "../assets/theme.less";
  .search-wrapper {
    width: 100%;
    padding: 1% 3%;
  }
  .mu-text-field {
    padding-right: 10%;
  }
  .title {
    margin: 0 0 .3rem 0.3rem;
    padding-left: .2rem;
    text-align: left;
    border-left: .15rem solid @primaryColor;
  }
</style>
